<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script src="jquery.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
            overflow: hidden;
        }

        .bg {
            width: 100%;
            height: 500px;
            background: #02030d;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg .bg-inner {
            width: 50%;
            height: 100%;
        }

        .bg .bg-inner .title {
            text-align: center;
            background: linear-gradient(to bottom, #198bbf, #214d68 90%);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
            font-size: 32px;
            line-height: 2;
        }

        .bg-inner .show-draw {
            width: 100%;
            height: calc(100% - 100px);
            position: relative;
        }

        .bg-inner .show-draw .draw {
            width: 70%;
            height: 100%;
            float: left;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .show {
            width: 30%;
            height: 100%;
            float: left;
        }

        .bg-inner .btn-group {
            width: 100%;
            text-align: center;
        }

        .bg-inner .btn-group .btn {
            font-size: 16px;
            padding: 5px 10px;
            text-align: center;
            display: inline-block;
            background: #259af7;
            color: #FFF;
            cursor: pointer;
            line-height: 1.5;
        }

        .bg-inner .show-draw .draw .draw_center {
            width: 300px;
            height: 300px;
            float: left;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .draw .draw_side {
            width: calc((100% - 300px) / 2);
            height: 300px;
            float: left;
        }

        /*效果*/
        .load-outer {
            width: 100%;
            height: 100%;
            z-index: 1;
            border-radius: 300px;
            box-shadow: 0 0 50px 0 gold inset;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .load-outer.shiney {
            animation-name: shiney;
            animation-duration: 1500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney {
            0% {
                width: 30%;
                height: 30%;
                transform: rotate(0deg);
                box-shadow: 0 0 10px 10px #FFF inset;
            }
            25% {
                width: 30%;
                height: 30%;
                transform: rotate(45deg);
                box-shadow: 0 0 10px 10px #fff9e5 inset;
            }
            50% {
                width: 30%;
                height: 30%;
                transform: rotate(90deg);
                box-shadow: 0 0 10px 10px #fff1ba inset;
            }
            70% {
                width: 50%;
                height: 50%;
                transform: rotate(180deg);
                box-shadow: 0 0 20px 10px #ffe386 inset;
            }
            100% {
                width: 100%;
                height: 100%;
                transform: rotate(360deg);
                box-shadow: 0 0 40px 20px gold inset;
            }
        }

        .load-inner {
            width: 61.8%;
            height: 61.8%;
            z-index: 2;
            /*animation-iteration-count: infinite;*/
            border-radius: 300px;
            box-shadow: 0 0 25px 0 gold inset;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .load-inner.shiney2 {
            animation-name: shiney2;
            animation-duration: 1500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney2 {
            0% {
                width: 61.8%;
                height: 61.8%;
                transform: rotate(0deg);
                box-shadow: 0 0 10px 10px #fff9ec inset;
            }
            25% {
                width: 61.8%;
                height: 61.8%;
                transform: rotate(45deg);
                box-shadow: 0 0 10px 10px #fffeed inset;
            }
            50% {
                width: 61.8%;
                height: 61.8%;
                transform: rotate(90deg);
                box-shadow: 0 0 10px 10px #fff9c7 inset;
            }
            75% {
                width: 61.8%;
                height: 61.8%;
                transform: rotate(180deg);
                box-shadow: 0 0 20px 10px #ffe386 inset;
            }
            100% {
                width: 61.8%;
                height: 61.8%;
                transform: rotate(360deg);
                box-shadow: 0 0 25px 10px gold inset;
            }
        }

        .beam_outer {
            position: absolute;
            background: radial-gradient(rgb(251, 215, 0) 0%, rgba(255, 231, 2, 0) 70%);
            border-radius: 50%;
            width: 300px;
            height: 10px;
            top: 83px;
            left: -52px;
            z-index: 3;
        }

        .beam_inner {
            position: absolute;
            background: radial-gradient(rgb(251, 215, 0) 0%, rgba(255, 231, 2, 0) 70%);
            border-radius: 50%;
            width: 300px;
            height: 10px;
            top: 249px;
            left: 115px;
            z-index: 3;
        }

        .beam_inner.beam {
            animation-name: beam-scale;
            animation-duration: 1500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        .beam_outer.beam1 {
            animation-name: beam-scale;
            animation-duration: 1500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        .beam_outer_circle {
            position: absolute;
            background: radial-gradient(gold 0%, rgba(255, 231, 2, 0) 70%);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            top: 62px;
            left: 81px;
            z-index: 4;
        }

        .beam_inner_circle {
            position: absolute;
            background: radial-gradient(gold 0%, rgba(255, 231, 2, 0) 70%);
            width: 50px;
            height: 50px;
            top: 230px;
            left: 250px;
            z-index: 4;
        }

        .beam_inner_circle.circle {
            animation-name: beam-scale;
            animation-duration: 1500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        .beam_outer_circle.circle1 {
            animation-name: beam-scale;
            animation-duration: 1500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes beam-scale {
            10% {
                background: none;
            }
            69% {
                background: none;
            }
            70% {
                transform: scale(5);
                background: radial-gradient(rgba(255, 255, 255, 0.12) 0%, rgba(255, 231, 2, 0) 70%);
            }
            80% {
                transform: scale(2.5);
                background: radial-gradient(rgba(251, 245, 173, 0.52) 0%, rgba(255, 231, 2, 0) 70%);
            }
            90% {
                transform: scale(1.2);
                background: radial-gradient(rgba(251, 250, 163, 0.92) 0%, rgba(255, 231, 2, 0) 70%);
            }
            100% {
                transform: scale(1);
                background: radial-gradient(rgba(251, 236, 169, 0.92) 0%, rgba(255, 231, 2, 0) 70%);
            }
        }

        @keyframes circle-scale {
            0% {
                background: none;
            }
            69% {
                background: none;
            }
            70% {
                transform: scale(5);
                border-radius: 50%;
                background: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 70%);
            }
            90% {
                transform: scale(1.2);
                border-radius: 50%;
                background: radial-gradient(rgb(255, 250, 160) 0%, rgba(255, 231, 2, 0) 70%);
            }

            95% {
                transform: scale(1.1);
                border-radius: 50%;
                background: radial-gradient(rgb(255, 241, 42) 0%, rgba(255, 231, 2, 0) 70%);
            }

            100% {
                transform: scale(1);
                border-radius: 50%;
                background: radial-gradient(gold 0%, rgba(255, 231, 2, 0) 70%);
            }
        }


    </style>
</head>
<body>
<div id="container">
    <div class="bg">
        <div class="bg-inner">
            <h1 class="title">/恭喜你获得/</h1>
            <div class="show-draw">
                <span class="beam_outer_circle"></span>
                <span class="beam_outer"></span>
                <span class="beam_inner"></span>
                <span class="beam_inner_circle"></span>
                <div class="draw">
                    <span class="draw_side"></span>
                    <div class="draw_center">
                        <div class="load-outer">
                            <div class="load-inner">
                                <!--<span>Loading</span>-->
                            </div>
                        </div>
                    </div>
                    <span class="draw_side"></span>
                </div>
                <div class="show">

                </div>
            </div>
            <div class="btn-group">
                <span class="btn" onclick="chouJiang()">抽奖</span>
            </div>
        </div>
    </div>
</div>
<script>

    /**
     * 抽奖
     */
    function chouJiang() {
        $(".load-outer").addClass("shiney");
        $(".load-inner").addClass("shiney2");
        $(".beam_inner").addClass("beam");
        $(".beam_outer").addClass("beam1");
        $(".beam_inner_circle").addClass("circle");
        $(".beam_outer_circle").addClass("circle1");
        setTimeout(function () {
            $(".load-outer").removeClass("shiney");
            $(".load-inner").removeClass("shiney2");
            $(".beam_inner").removeClass("beam");
            $(".beam_outer").removeClass("beam1");
            $(".beam_inner_circle").removeClass("circle");
            $(".beam_outer_circle").removeClass("circle1");
        }, 1500);
    }

</script>

</body>
</html>
